<script setup lang="ts">
interface User {
  date: string
  name: string
  address: string
}

const tableData: User[] = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles'
  }
]
// const selectable = (row: User) => ![1, 2].includes(row.name)

</script>

<template>
  <el-form :inline="true" class="form-inline" label-position="right">
    <el-form-item label="任务名">
      <el-input placeholder="任务名" clearable />
    </el-form-item>
    <el-form-item label="未来执行时间">
      <el-date-picker
        type="datetimerange"
        range-separator="To"
        start-placeholder="Start date"
        end-placeholder="End date"
      />
    </el-form-item>
    <el-form-item label="日历类型">
      <el-select placeholder="日历类型" style="width: 200px">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>
    <el-form-item label="状态">
      <el-select placeholder="状态" style="width: 200px">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>
    <el-form-item label="任务类型">
      <el-select placeholder="任务类型" style="width: 200px">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>
  </el-form>
  <div class="button-group">
    <el-button type="primary" @click="fetchData">查询</el-button>
    <el-button type="default" @click="resetData()">清空</el-button>
  </div>


  <el-table
    :data="tableData"
    style="width: 100%"
    max-height="350"
    stripe
  >
    <el-table-column type="selection" width="55" />
    <el-table-column prop="date" label="Date" width="180" sortable />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>
  <el-pagination layout="prev, pager, next,total" :total="50" style="display: flex;justify-content: center;" />
</template>

<style scoped>
.form-inline {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3列，等宽 */
  gap: 10px; /* 间距 */
}

.button-group {
  display: flex;
  justify-content: flex-end; /* 子元素靠右对齐 */
}
</style>